{% extends 'base.html' %}
{% block title %} 图表 {% endblock title %}

{% block content %}


<div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">折线图</div>
            <div class="panel-body">
                <div id="m3" style="width: 100%;height: 300px"></div>
            </div>
        </div>


    <div class="row">
        <div class="col-sm-8" >
            <div class="panel panel-default">
            <div class="panel-heading">柱状图</div>
            <div class="panel-body">
                <div id="m1" style="width: 600px;height:400px;"></div>
            </div>
        </div>
        </div>

       <div class="col-sm-4" >
            <div class="panel panel-default">
            <div class="panel-heading">饼图</div>
            <div class="panel-body">
                <div id="m2" style="width: 300px;height:400px;"></div>
            </div>
        </div>
        </div>
    </div>

</div>


<script type="text/javascript">

        $(function (){
            initBar();
        })

        /**
         * 初始化柱状图
         */
        function initBar(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('m1'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '各科成绩柱状图',
                textAlign:"auto",
                left:"center",
            },
            tooltip: {},
            legend: {
                data:[],
                bottom:0,
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [],
            bottom:0,
        };

        $.ajax({
            url: "/chart/bar/",
            type: "get",
            dataType: "JSON",
            success:function (res){
             //将后台返回的数据，更新到option中
              if (res.status){
                  option.legend.data = res.data.legend;
                  option.xAxis.data = res.data.x_axis;
                  option.series= res.data.series_list;
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
              }
            }
        })

        }

    </script>

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('m2'));

        myChart.setOption({
            title: {
                text: '各学院人数',
                textAlign:"auto",
                left:"center",
                subtext: 'Fake Data',
                 left: 'center'
              },
            tooltip: {
                trigger: 'item'
            },
            series : [
                {
                    name: '各学院学生人数',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
                        {value:284, name:'计算机科学与技术学院'},
                        {value:391, name:'阳明学院'},
                        {value:89, name:'历史学院'},
                        {value:170, name:'英语学院'},
                        {value:232, name:'机械学院'},
                        {value:302, name:'数学与统计学院' },
                    ]
                }
            ],
        })

</script>

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('m3'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '各科成绩折线图',
                textAlign:"auto",
                left:"center",
            },
            tooltip: {},
            legend: {
                data:[],
                bottom:0,
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [],
            bottom:0,
        };
        $.ajax({
            url:'/chart/line/',
            type:"get",
            dataType: "JSON",
            success:function (res){
                if(res.status){
                    option.legend.data = res.data.legend;
                    option.xAxis.data = res.data.x_axis;
                    option.series = res.data.series_list;
                    myChart.setOption(option);
                }
            }
        })




        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>

{% endblock %}
